<template>
	<view class="contentmy">
		<view class="bgback"></view>
		<view class="mycon">
			<view class="myximg">
				<view>
					<image  :src="user?imgoss+user.pic:'/static/mrimg.png'" mode="aspectFill"></image>
					<view>
						<view @tap="jump('/pages/login/index')">{{user?user.name:'立即登录'}}</view>
						<view>{{user.mobile}}</view>
					</view>
				</view>
				
					<u-icon @tap="jump('/subcontract/set/index')" color="#fff" name="setting"></u-icon>
			</view>
			<view class="mynav">
				<view v-for="(item,index) in navlist" :key="index" @tap="jump(item.path)">
					<image :src="item.img" mode="heightFix"></image>
					<span>{{item.name}}</span>
					<view class="ztxt" v-if="index<4&&item.num!=0">{{item.num}}</view>
				</view>
			</view>
			<view class="mynav1">
		<!-- 		<button @tap="jump('/subcontract/coupon/index')">
					<image src="/static/myicon6.png" mode="widthFix"></image>
					<span>优惠券</span>
					<image src="/static/newr.png" mode="widthFix" class="newr"></image>
				</button>
				<button @tap="jump('/subcontract/coupon/Collect')">
					<image src="/static/myicon7.png" mode="widthFix"></image>
					<span>我的收藏</span>
					<image src="/static/newr.png" mode="widthFix" class="newr"></image>
				</button>
				<button  @tap="bdbtn(channel.tel)">
					<image src="/static/myicon8.png" mode="widthFix"></image>
					<span>客服</span>
					<image src="/static/newr.png" mode="widthFix" class="newr"></image>
				</button> -->
				<button  @tap="jump('/pages/login/indexTwo')">
					<image src="/static/shop.png" mode="widthFix"></image>
					<span>门店核销</span>
					<image src="/static/newr.png" mode="widthFix" class="newr"></image>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	var util = require('../../../utils/util.js');
	export default {
		data() {
			return {
				imgoss: app.globalData.imgoss,
				statusBarHeight: app.globalData.statusBarHeight,
				statusBarHeight1: app.globalData.statusBarHeight1,
				img_src: app.globalData.img_src,
				navBarHeight: '',
				menuRight: '',
				menuBotton: '',
				menuHeight: '',
				navlist:[{
					img:'/static/myicon1.png',
					name:'待付款',
					path:'/pages/order/billList?type=1',
					num:0
				},{
					img:'/static/myicon2.png',
					name:'待使用',
					path:'/pages/order/billList?type=2',
					num:0
				},{
					img:'/static/myicon3.png',
					name:'待评价',
					path:'/pages/order/billList?type=3',
					num:0
				},{
					img:'/static/myicon4.png',
					name:'退款',
					path:'/pages/order/billList?type=4',
					num:0
				},{
					img:'/static/myicon5.png',
					name:'全部',
					path:'/pages/order/billList?type=0',
					num:0
				}]
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			state: {
				type: Number,
				default: 0
			},
			user: {
				type: [Object,String],
				default: ''
			},
			order: {
				type: [Object,String],
				default: ''
			},
			channel: {
				type: [Object,String],
				default: ''
			},
		},
		created() {
			this.navlist[0].num = this.order.order_1?this.order.order_1:0
			this.navlist[1].num = this.order.order_2?this.order.order_2:0
			this.navlist[2].num = this.order.order_3?this.order.order_3:0
			this.navlist[3].num = this.order.order_4?this.order.order_4:0
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			bdbtn(phone){
				util.telephone(phone)
			},
			attached: function() {
				const that = this;
				// 获取系统信息
				// const systemInfo = uni.getSystemInfoSync();
				// // 胶囊按钮位置信息
				// const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				// // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
				// ////console.log((systemInfo))
				// this.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight
				// this.menuRight = systemInfo.screenWidth - menuButtonInfo.right
				// this.menuBotton = systemInfo.statusBarHeight
				// this.menuHeight = menuButtonInfo.height
			},
			login(){
				var that = this;
				uni.showModal({
					title: '温馨提示',
					content: '确定要退出登录吗吗？',
					confirmColor:'#24C373',
					success: function (res) {
						if (res.confirm) {
							uni.removeStorageSync('token');
							uni.clearStorageSync();
							uni.reLaunch({
								url:'/pages/my/my'
							})
							////console.log('用户点击确定');
						} else if (res.cancel) {
							////console.log('用户点击取消');
						}
					}
				});
			},
			jump(url){
				if(uni.getStorageSync('token')){
					uni.navigateTo({
						url:url
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/index'
					})
				}
				
			},
		},
		mounted() {
			// 处理小程序 attached 生命周期
			this.attached();
			
		},
	};
</script>
<style lang="scss">
	.mycon{
		width: 100%;
		height: auto;
		position: relative;
		z-index: 10;
		background: url($IMG_URL+'mytop.png')no-repeat;
		background-size: 100% auto;
		box-sizing: border-box;
		padding: 30rpx;
	}
	.bgback{
		width: 100%;
		height: 100vh;
		background-color: #fff;
		position: fixed;
		top: 0px;
		left: 0px;
	}
	.mynav1{
		width: 100%;
		height: auto;
		display: table;
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 0px 20rpx;
		background-color: #fff;
	}
	.mynav1>button{
		width: 100%;
		height: 100rpx;
		display: inline-flex;
		align-items: center;
		appearance: none;
		border: none;
		background-color: none;
		border-bottom: 1px solid rgba(187,187,187,0.2);
		padding:0px 0rpx;
		position: relative;
		color: rgb(26,26,26);
		font-size: 28rpx;
		text-align: left;
		border-radius: 0px;
		font-family: SourceHanSansSC-regular;
		background-color: none;
		background: none;
	}
	.mynav1>button>image:nth-child(1){
		width: 42rpx;
		height:auto;
		margin-right: 5px;
	}
	.newr{
		width: 35rpx;
		height: auto;
		position: absolute;
		top: 50%;
		right: 10rpx;
		margin-top: -17.5rpx;
	}
	.mynav1>button::after{
		content:'';
		border: none;
	}
	.mynav1>button:last-child{
		border-bottom: none;
	}
	.mynav>view{
		width: 20%;
		height: auto;
		display: inline-flex;
		padding: 40rpx 0px;
		float: left;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: rgb(26,26,26);
		font-size: 24rpx;
		text-align: center;
		font-family: SourceHanSansSC-regular;
		position: relative;
	}
	.ztxt{
		width: 18px;
		height: 18px;
		background: #D9688E;
		position: absolute;
		top:10px;
		right: 12%;
		text-align: center;
		line-height: 18px;
		font-size: 22rpx;
		color: #fff;
		border-radius: 50px;
	}
	.mynav>view>image{
		width: auto;
		height: 30px;
		margin-bottom: 4px;
	}
	.mynav{
		width: 100%;
		display: table;
		height: auto;
		border-radius: 20rpx;
		background: rgba(255,255,255,1);
		box-shadow: 0px 2px 14px 2px rgba(0,0,0,0.09);
		box-sizing: border-box;
		padding: 0px 20rpx;
		margin-top: 23rpx;
	}
	.myximg>view>view>view{
		width: 100%;
		height: auto;
	}
	.myximg>view>view{
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.myximg>view>view>view:nth-child(1){
		color: rgba(255,255,255,1);
		font-size: 30rpx;
		font-family: PingFangSC-regular;
		margin-bottom: 10rpx;
	}
	.myximg>view>view>view:nth-child(2){
		color: rgba(255,255,255,1);
		font-size: 24rpx;
		font-family: PingFangSC-regular;
	}
	.myximg>view>image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50px;
		position: absolute;
		top: 0px;
		left:0px;
	}
	.myximg{
		width: 100%;
		height: 120rpx;
		display: inline-flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		padding-left: 140rpx;
		box-sizing: border-box;
	}
	.contentmy{
		width: 100%;
		height: auto;
		display: table;
	}
	page{
		background:#fff;
	}
</style>